<template>
    <vxe-grid
        border
        resizable
        height="300"
        :columns="tableColumn"
        row-id="id"
        :data="tableData">
    >

    </vxe-grid>
</template>

<script>
export default {
    data() {
        return {
            tableColumn: [
                { type: 'seq', width: 50 },
                { field: 'name', title: '名称' },
                { field: 'sex', title: '性别' },
                { field: 'address', title: '地址' },
                { field: 'date', title: '日期', formatter: this.dateFormat, cellRender: {
                    name: 'input',
                    props: {
                        value: 'afafafa'
                    }
                } }
            ],
            tableData: [
                { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen', date: 1620696721633 },
                { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou', date: 1620696421633 },
                { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai',  date: 1620696421633 },
                { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women ', age: 23, address: 'Shenzhen',  date: 1620676421633 },
                { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women ', age: 30, address: 'Shanghai', date: 1620296421633 },
                { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women ', age: 21, address: 'Shenzhen',  date: 1620696421633 },
                { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man ', age: 29, address: 'Shenzhen', date: 1620696491633 },
                { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man ', age: 35, address: 'Shenzhen', date: 1620696411633 }
            ]
        }
    },
    methods: {
        dateFormat({ cellValue }) {
            console.log('data data data ', new Date(cellValue).toLocaleString());
            return new Date(cellValue).toLocaleString();
        }
    }
}
</script>